<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>发起申请</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ position: absolute;top:0;left: 0;  height: 86px; width: 100%;z-index: 999; background:#fff; overflow: hidden; }
.page-top .top-nav{ width: 100%;  height: 50px;  }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px;   }
.g-other{float: right;width: 80px; height: 50px;  }
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center;  }
#searchBar{ background: #fff; border:0; }
.weui-search-bar:before{ height: 0;width: 0 }
.weui-search-bar:after{ height: 0;width: 0 }
.weui-search-bar__label,.weui-search-bar__box{ background: #f3f4f9;  }
.weui-search-bar{ padding-top: 0; }
/*内容容器*/
/*内容*/
.page-wrap{position: absolute;top:0;left: 0; padding: 96px 0 44px 0; height: 100%; width: 100%;  background:#f8f8f8;overflow-y: auto; }
.p-cont-t{display: block; padding:0 0 0 12px; width: 100%; height: 50px; line-height: 50px; font-size: 15px; border-bottom: 1px solid #f2f2f2;}
.p-cont-t i{ float: left; margin: 14px 7px auto auto; width: 22px;height: 22px; }
.page-cont-list{ margin-bottom: 10px; background: #fff;  }
.page-cont-list .s-x{margin:0;float:right; width: 40px; height:100%; }
/*子项列表默认影藏*/
.hide-show{ display: none; }
/*组织架构*/
.list-2{ padding-left: 25px; }
.list-2 li{ display:block; width: 100%; min-height: 40px;line-height: 40px; font-size: 14px; border-bottom: 1px solid #f2f2f2;}
.list-2 a{display: block; color: inherit;}
.list-2 a i{ float: left; margin:10px 5px; width: 20px;height: 20px;}
/*左侧展示,收藏按钮*/
.Dbt{ width: 40px;height: 40px;  }
.c-other{ margin-left: 35px; }
/*常用联系人*/
.lianxiren{ margin-left: 25px; }
.lianxiren li { overflow: hidden;  height: 50px; line-height: 50px; }
.lianxiren img{float: left; margin:5px 10px; width: 40px; height: 40px; border-radius: 50%;}
.lianxiren .name{float: left; line-height: 50px; font-size: 15px; color: #3a3a3a;}
.lianxiren .zhiye{float: left;margin-left: 30px; line-height: 50px; font-size: 13px; color: #a1a1a1;}
.borderNone{ border-bottom: 0 !important; }
ul.j2{ margin: 0; }
/*图标*/
.x-no{ border-radius: 50%; border: 1px solid #a3a3a3; }                                                                              /*一个都没选择时*/
.some-xuan{ background: url(../img/a22_03.png) center no-repeat; background-size: 22px;  }                  /*选择部分时  */
.all-xuan{ background: url(../img/dui_03.png) center no-repeat; background-size: 22px; }                         /* 全选*/
.zhe{ background: url(../img/zhe_07.png) no-repeat;  background-size: 20px; }                                          /*折线*/
.lg-icon { background-size: 22px 22px; width: 22px;height: 22px;}                                                               /*一级图标基础样式*/
.sm-icon { background-size: 20px 20px;width: 20px;height: 20px;  }                                                             /*二级图标基础样式*/
.xs-icon { margin:20px auto auto 12px;  float: left; background-size: 15px; width: 15px;height: 15px; }      /*三级图标基础样式*/
/*底部信息*/
.botm{ position: absolute; bottom: 0;left: 0; z-index: 99; width: 100%; height: 44px; box-shadow: 0 1px 10px #f1f1f1; background: #fff; }
.botm .left,.botm .right{  margin-top: 6px; width: 92px; height: 33px; line-height: 33px; font-size: 14px; text-align: center; }
.botm .left{margin-left: 13px;  }
.botm .right{margin-right: 13px; border-radius: 3px; background: #2298fe; color: #fff; }
/*其他信息*/
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }
.g-down{padding-right:16px; background:url(../img/down_06.png) center no-repeat; background-size: 14px 8px; }
.g-up{padding-right:16px; background:url(../img/up_03.png) center no-repeat; background-size: 13px 7px; }
</style>
</head>
<body>
<div class="page-container">
           <!-- 头部 -->
            <div class="page-top">
                    <div class="top-nav" >
                            <a  href="javascript:history.back(-1);" class="g-back"></a>     
                            <a  class="g-other"></a>                
                            <span class="t-title">发起群聊</span>                                                 
                    </div>
                    <div class="top-search" style="width:100%;">
                           <div class="weui-search-bar" id="searchBar" >
                                <form class="weui-search-bar__form">
                                      <div class="weui-search-bar__box">
                                            <i class="weui-icon-search"></i>
                                            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                                            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                                      </div>
                                      <label class="weui-search-bar__label" id="searchText">
                                            <i class="weui-icon-search"></i>
                                            <span>搜索</span>
                                      </label>
                                </form>
                                <!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
                          </div>
                    </div>
            </div>
            <!-- 内容区 -->
            <div class=" page-wrap" > 
                  <div class="page-cont-list" >
                        <a class="p-cont-t"><i class="lg-icon x-no btnIcon"></i>选择教师(<span>6</span>) <i class="s-x Dbt g-up"></i></a>
                        <div class="hide-show">
                              <ul class="list-2">
                                        <li>
                                             <a >
                                                  <i class="sm-icon x-no btnIcon"></i>
                                                  <span class="title" >选择部门1</span>
                                                  (<span>2</span>)
                                                  <span class="right Dbt g-up"></span>
                                             </a>
                                             <ul class="lianxiren hide-show">
                                                    <li>
                                                            <i class="xs-icon x-no btnIcon"></i>
                                                            <img src="../img/t1.png" alt="">
                                                            <span class="name">李晓玲</span>
                                                            <span class="zhiye">班主任</span>
                                                    </li>
                                                    <li class="borderNone">
                                                            <i class="xs-icon x-no btnIcon"></i>
                                                            <img src="../img/t1.png" alt="">
                                                            <span class="name">李晓玲</span>
                                                            <span class="zhiye">班主任</span>
                                                    </li>
                                             </ul>
                                       </li>
                                       <li>
                                             <a >
                                                  <i class="sm-icon x-no btnIcon"></i>
                                                  <span class="title">选择部门2</span>
                                                  (<span>2</span>)
                                                  <span class="right Dbt g-up"></span>
                                             </a>  
                                             <ul class="lianxiren hide-show">
                                                    <li>
                                                            <i class="xs-icon x-no btnIcon"></i>
                                                            <img src="../img/t1.png" alt="">
                                                            <span class="name">李晓玲</span>
                                                            <span class="zhiye">班主任</span>
                                                    </li>
                                                    <li class="borderNone">
                                                            <i class="xs-icon x-no btnIcon"></i>
                                                            <img src="../img/t1.png" alt="">
                                                            <span class="name">李晓玲</span>
                                                            <span class="zhiye">班主任</span>
                                                    </li>
                                             </ul>
                                       </li>
                              </ul>
                              <p style="height: 5px;background: #f2f2f2;"></p>
                              <ul class="lianxiren j2">
                                      <li>
                                              <i class="xs-icon x-no btnIcon"></i>
                                              <img src="../img/t1.png" alt="">
                                              <span class="name">李晓</span>
                                              <span class="zhiye">班主任</span>
                                      </li>
                                      <li>
                                              <i class="xs-icon x-no btnIcon"></i>
                                              <img src="../img/t5.png" alt="">
                                              <span class="name">李晓</span>
                                              <span class="zhiye">班主任</span>
                                      </li>
                              </ul>
                       </div>
                  </div>
                  <div class="page-cont-list" >
                        <a class="p-cont-t"><i class="lg-icon x-no btnIcon"></i>选择学生(<span>5</span>) <i class="s-x Dbt g-up"></i></a>
                        <div class="hide-show">
                              <ul class="list-2">
                                        <li>
                                             <a >
                                                  <i class="sm-icon x-no btnIcon"></i>
                                                  <span class="title" >选择部门1</span>
                                                  (<span>2</span>)
                                                  <span class="right Dbt g-up"></span>
                                             </a>
                                             <ul class="lianxiren hide-show">
                                                    <li>
                                                            <i class="xs-icon x-no btnIcon"></i>
                                                            <img src="../img/t1.png" alt="">
                                                            <span class="name">李晓玲</span>
                                                            <span class="zhiye">班主任</span>
                                                    </li>
                                                    <li>
                                                            <i class="xs-icon x-no btnIcon"></i>
                                                            <img src="../img/t1.png" alt="">
                                                            <span class="name">李晓玲</span>
                                                            <span class="zhiye">班主任</span>
                                                    </li>
                                             </ul>
                                       </li>
                                       <li>
                                             <a >
                                                  <i class="sm-icon x-no btnIcon"></i>
                                                  <span class="title">选择部门2</span>
                                                  (<span>2</span>)
                                                  <span class="right Dbt g-up"></span>
                                             </a>  
                                             <ul class="lianxiren hide-show">
                                                    <li>
                                                            <i class="xs-icon x-no btnIcon"></i>
                                                            <img src="../img/t1.png" alt="">
                                                            <span class="name">李晓玲</span>
                                                            <span class="zhiye">班主任</span>
                                                    </li>
                                                    <li>
                                                            <i class="xs-icon x-no btnIcon"></i>
                                                            <img src="../img/t1.png" alt="">
                                                            <span class="name">李晓玲</span>
                                                            <span class="zhiye">班主任</span>
                                                    </li>
                                             </ul>
                                       </li>
                              </ul>
                              <p style="height: 5px;background: #f2f2f2;"></p>
                              <ul class="lianxiren j2">
                                      <li>
                                              <i class="xs-icon x-no btnIcon"></i>
                                              <img src="../img/t1.png" alt="">
                                              <span class="name">李晓</span>
                                              <span class="zhiye">班主任</span>
                                      </li>
                              </ul>
                       </div>
                  </div>
            </div>

            <div class="botm">
                    <div class="left">已选择:<span id="s-num">5</span>人</div>
                    <a class="right" href="../tongxunlu/qunliaoye.html" id="ok-btn">确定(5/99)</a>
            </div>
</div>
</body>
<script>
 (function(){
    // 下拉效果
    function xiala(x){
        $(x).click(function () {
               // $(x).parent().next().slideUp();
               if( $(this).parent().next().css('display') == "none" ){
                    $(this).parent().next().slideDown();
                    $(this).removeClass("g-up").addClass("g-down");
               }else{
                    $(this).parent().next().slideUp();
                    $(this).removeClass("g-down").addClass("g-up");
               } 
        }) 
    }
    xiala('.Dbt');
  // 计算选中的个数
   function num(){
        var m=0;
       $(".page-wrap").find(".xs-icon").each(function(i,v){
              if(  $(v).hasClass("all-xuan")  ){ m++; }
       })
       return m;
   }
// 初始化显示底部选中人数
  $("#s-num").text( num() );
  $("#ok-btn" ).text( "确定("+num()+"/"+$(".page-wrap").find(".xs-icon").length+")" )

// 判断选择结果
    function  x_g(x,y){
        var n = x.find(".xs-icon").length;
        var m = 0;
        $(x).find(".xs-icon").each(function(i,v){
                      if(  $(v).hasClass("all-xuan")  ){ m++; }
         });
        if( m ==0 ){    x.find(y).removeClass("all-xuan").removeClass("some-xuan").addClass("x-no") }
        if( m >0 && m<n ){    x.find(y).removeClass("all-xuan").removeClass("x-no").addClass("some-xuan") }
        if( m == n){    x.find(y).removeClass("x-no").removeClass("some-xuan").addClass("all-xuan") }
    }
    x_g( $(".hide-show"), ".sm-icon");
    x_g( $(".page-cont-list"), ".lg-icon");

      // 个人选择
      $(".lianxiren").find('li').click(function(){
                   if( $(this).find('i').hasClass("x-no")){
                        $(this).find('.btnIcon').removeClass("x-no").addClass("all-xuan")
                   }else{
                        $(this).find('.btnIcon').addClass("x-no").removeClass("all-xuan")
                   }
                  if( !$(this).parent().hasClass("j2") ){
                          x_g( $(this).parent().parent() , ".sm-icon" );    

                  }
                  x_g( $(this).parents(".page-cont-list") , ".lg-icon");       
                 // 更新底部显示选中的人数
                 $("#s-num").text( num() );
                 $("#ok-btn" ).text( "确定("+num()+"/"+$(".page-wrap").find(".xs-icon").length+")" )
      })

    // 父级菜单项点击
    $(".btnIcon").click(function(){
          if( !$(this).hasClass("xs-icon")){
                  if($(this).hasClass("all-xuan")){
                       $(this).removeClass("all-xuan").addClass("x-no");
                       $(this).parent().next().find(".btnIcon").removeClass("all-xuan").addClass("x-no");
                  }else{
                      $(this).removeClass("x-no").addClass("all-xuan");
                       $(this).parent().next().find(".btnIcon").removeClass("x-no").addClass("all-xuan");
                  }
                  x_g( $(this).parents(".page-cont-list") , ".lg-icon");
          }
          // 更新底部显示选中的人数
         $("#s-num").text( num() );
         $("#ok-btn" ).text( "确定("+num()+"/"+$(".page-wrap").find(".xs-icon").length+")" )
    })

      // $(".right.color2").click(function(){
      //        location.href = "../通讯录/选择部门教师.html";
      // })
})();
</script>
</html>